$sans-serif-font-stack:
    Lato, "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
$serif-font-stack:
    "Playfair Display", Georgia, "Times New Roman", "Liberation Serif", serif;
$monospace-font-stack:
    "Menlo", "Courier New", Courier, monospace; // only to be used for code blocks
$default-font-features: "liga", "kern", "calt", "lnum";

//
// typographic features
//

@mixin small-caps {
    // only applies to Playfair
    font-family: $serif-font-stack;
    font-feature-settings: $default-font-features, "c2sc", "smcp";
    letter-spacing: 0.05em;
}

@mixin oldstyle-numerals {
    // useful for changing Lato's numerals
    font-feature-settings: $default-font-features, "onum";
}

@mixin lining-numerals {
    // useful for changing Playfair's numerals
    font-feature-settings: $default-font-features, "lnum";
}

@mixin superscript {
    position: static;
    top: auto;
    font-size: 100%;
    font-feature-settings: $default-font-features, "sups";
}

@mixin subscript {
    position: static;
    bottom: auto;
    font-size: 100%;
    font-feature-settings: $default-font-features, "subs";
}

@mixin fraction {
    // when enabled, render digits/slashes as fractions
    // e.g., "in 3/4 time" renders as "in ¾ time"
    font-feature-settings: $default-font-features, "frac";
}

body {
    // use the default features everywhere
    font-feature-settings: $default-font-features;
}

//
// page elements
//

@mixin display-1-semibold {
    font-family: $serif-font-stack;
    font-size: 3.5rem;
    line-height: 1.4;
    font-weight: 600;
    display: block;
    margin-top: 48px;
    margin-bottom: 24px;
    letter-spacing: -0.01rem;
}

.display-1-semibold {
    @include display-1-semibold;
}

@mixin display-2-semibold {
    font-family: $serif-font-stack;
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 600;
    display: block;
    margin-top: 48px;
    margin-bottom: 24px;
    letter-spacing: -0.01rem;

    @include sm-up {
        font-size: 2.5rem;
    }
}

.display-2-semibold {
    @include display-2-semibold;
}

@mixin display-3-semibold {
    font-family: $sans-serif-font-stack;
    font-size: 2rem;
    line-height: 1.1875;
    font-weight: 500;
    display: block;
    margin-top: 32px;
    margin-bottom: 24px;

    @include sm-up {
        margin-top: 48px;
        font-size: 2rem;
    }
}

.display-3-semibold {
    @include display-3-semibold;
}

@mixin h1-semibold {
    font-family: $serif-font-stack;
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 600;
    display: block;
    margin-top: 48px;
    margin-bottom: 24px;
    letter-spacing: 0;

    @include sm-up {
        font-size: 2rem;
    }
}

.h1-semibold {
    @include h1-semibold;
}

@mixin h1-bold-italic {
    font-family: $serif-font-stack;
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 700;
    font-style: italic;
    display: block;
    margin-top: 48px;
    margin-bottom: 24px;
    letter-spacing: 0;

    @include sm-up {
        font-size: 2rem;
    }
}

.h1-bold-italic {
    @include h1-bold-italic;
}

@mixin h2-bold {
    font-family: $serif-font-stack;
    font-size: 1.25rem;
    line-height: calc(4 / 3);
    font-weight: 700;
    display: block;
    margin-top: 48px;
    margin-bottom: 24px;
    letter-spacing: 0;

    @include sm-up {
        font-size: 1.5rem;
    }
}

.h2-bold {
    @include h2-bold;
}

@mixin h2-semibold {
    font-family: $serif-font-stack;
    font-size: 1.25rem;
    line-height: 1.2;
    font-weight: 600;
    display: block;
    margin-top: 48px;
    margin-bottom: 24px;
    letter-spacing: 0;
}

.h2-semibold {
    @include h2-bold;
}

@mixin h3-bold {
    font-family: $serif-font-stack;
    font-size: 1.125rem;
    line-height: calc(4 / 3);
    font-weight: 700;
    display: block;
    margin-top: 48px;
    margin-bottom: 24px;
    letter-spacing: 0;
}

.h3-bold {
    @include h3-bold;
}

@mixin h3-semibold {
    font-family: $serif-font-stack;
    font-size: 1.125rem;
    line-height: calc(4 / 3);
    font-weight: 600;
    display: block;
    margin-top: 48px;
    margin-bottom: 24px;
    letter-spacing: 0;
}

.h3-semibold {
    @include h3-semibold;
}

@mixin h4-semibold {
    font-family: $serif-font-stack;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 600;
    display: block;
    margin-top: 48px;
    margin-bottom: 24px;
    letter-spacing: 0;
}

.h4-semibold {
    @include h4-semibold;
}

@mixin h5-black-caps {
    font-family: $sans-serif-font-stack;
    font-size: 0.75rem;
    font-weight: 900;
    line-height: calc(4 / 3);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.h5-black-caps {
    @include h5-black-caps;
}

@mixin h6-black-caps {
    font-family: $sans-serif-font-stack;
    font-size: 0.625rem;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.h6-black-caps {
    @include h6-black-caps;
}

@mixin subtitle-1 {
    font-family: $sans-serif-font-stack;
    font-size: 1.5rem;
    line-height: calc(4 / 3);
    font-weight: 400;
    letter-spacing: 0;
    margin-top: 32px;
    margin-bottom: 16px;
}

.subtitle-1 {
    @include subtitle-1;
}

@mixin subtitle-1-bold {
    @include subtitle-1;
    font-weight: 700;
}

.subtitle-1-bold {
    @include subtitle-1-bold;
}

@mixin subtitle-2 {
    font-family: $sans-serif-font-stack;
    font-size: 1.375rem;
    line-height: calc(28 / 22);
    font-weight: 400;
    letter-spacing: 0;
}

.subtitle-2 {
    @include subtitle-2;
}

@mixin subtitle-2-bold {
    font-family: $sans-serif-font-stack;
    font-size: 1.25rem;
    line-height: 1.2;
    font-weight: 700;
}

.subtitle-2-bold {
    @include subtitle-2-bold;
}

@mixin overline-black-caps {
    font-family: $sans-serif-font-stack;
    font-size: 0.75rem;
    line-height: calc(4 / 3);
    font-weight: 900;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
}

.overline-black-caps {
    @include overline-black-caps;
}

@mixin body-1-regular {
    font-family: $sans-serif-font-stack;
    font-size: 1.125rem;
    line-height: 1.55;
    font-weight: 400;
    letter-spacing: 0;
}

.body-1-regular {
    @include body-1-regular;
}

@mixin body-1-bold {
    @include body-1-regular;
    font-weight: 700;
}

.body-1-bold {
    @include body-1-bold;
}

@mixin body-1-regular-underlined {
    @include body-1-regular;
    text-decoration: underline;
}

.body-1-regular-underlined {
    @include body-1-regular-underlined;
}

@mixin body-1-regular-superscript {
    @include body-1-regular;
    font-size: 0.5625rem;
    vertical-align: top;
}

.body-1-regular-superscript {
    @include body-1-regular-superscript;
}

@mixin body-1-bold {
    @include body-1-regular;
    font-weight: 700;
}

.body-1-bold {
    @include body-1-bold;
}

@mixin body-2-regular {
    font-family: $sans-serif-font-stack;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: 0;
}

.body-2-regular {
    @include body-2-regular;
}
@mixin body-2-bold {
    font-family: $sans-serif-font-stack;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: 0;
}

.body-2-bold {
    @include body-2-bold;
}

@mixin body-2-regular-underlined {
    @include body-2-regular;
    text-decoration: underline;
}

.body-2-regular-underlined {
    @include body-2-regular-underlined;
}

@mixin body-2-regular-superscript {
    @include body-2-regular;
    font-size: 0.5rem;
    vertical-align: top;
}

.body-2-regular-superscript {
    @include body-2-regular-superscript;
}

@mixin body-2-semibold {
    @include body-2-regular;
    font-weight: 600;
}

.body-2-semibold {
    @include body-2-semibold;
}

@mixin body-3-regular {
    font-family: $sans-serif-font-stack;
    font-size: 0.875rem;
    line-height: 1.5;
    font-weight: 400;
}

.body-3-regular {
    @include body-3-regular;
}

@mixin body-3-medium {
    font-family: $sans-serif-font-stack;
    font-size: 0.875rem;
    line-height: 1.5;
    font-weight: 500;
}

.body-3-medium {
    @include body-3-medium;
}

@mixin body-3-medium-underlined {
    @include body-3-medium;
    text-decoration: underline;
}

.body-3-medium-underlined {
    @include body-3-medium-underlined;
}

@mixin body-3-medium-italic {
    @include body-3-medium;
    font-style: italic;
}

.body-3-medium-italic {
    @include body-3-medium-italic;
}

@mixin body-3-medium-italic-underlined {
    @include body-3-medium;
    text-decoration: underline;
    font-style: italic;
}

.body-3-medium-italic-underlined {
    @include body-3-medium-italic-underlined;
}

@mixin body-3-bold {
    font-family: $sans-serif-font-stack;
    font-size: 0.875rem;
    line-height: 1.5;
    font-weight: 700;
}

.body-3-bold {
    @include body-3-bold;
}

@mixin label-1-regular {
    font-family: $sans-serif-font-stack;
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: normal;
    line-height: normal;
}

.label-1-regular {
    @include label-1-regular;
}

@mixin label-2-medium {
    font-family: $sans-serif-font-stack;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: normal;
}

.label-2-medium {
    @include label-2-medium;
}

@mixin label-2-regular {
    font-family: $sans-serif-font-stack;
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: normal;
}

.label-2-regular {
    @include label-2-regular;
}

@mixin label-2-bold {
    font-family: $sans-serif-font-stack;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.01em;
}

.label-2-bold {
    @include label-2-bold;
}

@mixin note-1-regular {
    font-family: $sans-serif-font-stack;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: calc(4 / 3);
}

.note-1-regular {
    @include note-1-regular;
}

@mixin note-1-medium {
    @include note-1-regular;
    font-weight: 500;
}

.note-1-medium {
    @include note-1-medium;
}

@mixin note-2-regular {
    font-family: $sans-serif-font-stack;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.22px;
}

.note-2-regular {
    @include note-2-regular;
}

@mixin note-12-medium {
    font-family: $sans-serif-font-stack;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.33;
    letter-spacing: 0.0075rem;
}

.note-12-medium {
    @include note-12-medium;
}

@mixin note-13-medium {
    font-family: $sans-serif-font-stack;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1rem;
}

.note-13-medium {
    @include note-13-medium;
}
